// 左Y轴设置
import React, { useState } from 'react';
import { Switch, Input } from 'antd';
import Editor from 'src/pages/AnalyseManage/EditReport/components/EditorStyleType/Editor';
import FormItem from 'antd/lib/form/FormItem';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const LYAxis = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;

	const fontConfig = [ 'fontFamily', 'fontSize', 'fontColor', 'fontBold', 'fontItalic' ];

	const [ isHiddenLYGridLine, setIsHiddenLYGridLine ] = useState(
		config.style && config.style.hasOwnProperty( 'isHiddenLYGridLine' ) ? config.style.isHiddenLYGridLine : false
	);
	const [ isShowLYLine, setIsShowLYLine ] = useState(
		config.style && config.style.hasOwnProperty( 'isShowLYLine' ) ? config.style.isShowLYLine : true
	);
	const [ isShowLYLineName, setIsShowLYLineName ] = useState(
		config.style && config.style.hasOwnProperty( 'isShowLYLineName' ) ? config.style.isShowLYLineName : false
	);

	const onChange = ( checked: boolean, name: string, cb: any ) => {
		// setIsShowXLineName( checked );
		cb && cb();
		form.setFieldsValue( { [name]: checked } );
		onValuesChange( config.type, config.key, { [name]: checked }, 'style' );
	};

	const onBlur = ( value: any, name: string ) => {
		onValuesChange( config.type, config.key, { [name]: form.getFieldsValue()[name] }, 'style' );
	};

	return (
		<div>
			<FormItem label="隐藏Y轴网格线" name="isHiddenLYGridLine" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch
					checked={isHiddenLYGridLine}
					onChange={( checked ) => onChange( checked, 'isHiddenLYGridLine', setIsHiddenLYGridLine( checked ) )}
				></Switch>
			</FormItem>
			<FormItem label="是否显示轴线" name="isShowLYLine" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch
					checked={isShowLYLine}
					onChange={( checked ) => onChange( checked, 'isShowLYLine', setIsShowLYLine( checked ) )}
				></Switch>
			</FormItem>
			{isShowLYLine && (
				<>
					<FormItem label="是否显示轴名称" name="isShowLYLineName" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
						<Switch
							checked={isShowLYLineName}
							onChange={( checked ) =>
								onChange( checked, 'isShowLYLineName', setIsShowLYLineName( checked ) )
							}
						></Switch>
					</FormItem>

					{isShowLYLineName && (
						<>
							<FormItem label="Y轴名称" name="chartLYAxisName">
								<Input
									onBlur={( value ) => onBlur( value, 'chartLYAxisName' )}
									onPressEnter={( value ) => onBlur( value, 'chartLYAxisName' )}
								></Input>
							</FormItem>
							<FormItem label="字体" name="chartLYLineFont" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
								<Editor
									config={config}
									form={form}
									onValuesChange={onValuesChange}
									fontFamilyName="LYLineFontFamily"
									fontSizeName="LYLineFontSize"
									fontColorName="LYLineFontColor"
									boldName="LYLineFontBold"
									italicName="LYLineFontItalic"
									fontConfig={fontConfig}
								/>
							</FormItem>
						</>

					)}

				</>
			)}
			{/* <FormItem label="数据单位" name="chartLYAxisDataUnit" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Select allowClear>
					<Select.Option value="percent">%</Select.Option>
					<Select.Option value="tenthousand">万</Select.Option>
					<Select.Option value="million">百万</Select.Option>
				</Select>
			</FormItem> */}
		</div>
	);
};

export default React.memo( LYAxis );
